import { defineComponent, reactive, ref, computed, onMounted } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import promotionPerformanceService from "@/modules/channelManagement/promotionPerformance.service";
import { $getChannelAllList } from "@/api/search/search";
import useNavigator from "@/hooks/useNavigator";
import {
  EditOutlined,
} from "@ant-design/icons-vue";

export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const state = reactive({
      toolbar: {
        left: ["refresh", "output"],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "100px",
        },
        {
          title: "一级渠道",
          dataIndex: ["first_level","label"],
          align: "center",
          width: "200px",
        },
        {
          title: "二级渠道",
          dataIndex: ["second_level","label"],
          align: "center",
          width: "180px",
        },
        {
          title: "三级渠道",
          dataIndex: ["third_level","label"],
          align: "center",
          width: "180px",
        },
        {
          title: "推广员姓名",
          dataIndex: "realname",
          align: "center",
          width: "220px",
        },
        {
          title: "推广人员编码",
          dataIndex: "number",
          align: "center",
          width: "180px",
        },
        {
          title: "合计销售单量",
          dataIndex: "count",
          align: "center",
          width: "220px",
        },
        {
          title: "合计保费金额",
          dataIndex: "fee",
          align: "center",
          width: "220px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
        },
      ],
      loading: false,
      searchForm: {
        first_level: {
          type: "select",
          label: "一级渠道",
          attrs: { placeholder: "一级渠道" },
          datas:[],
        },
        second_level: {
          type: "select",
          label: "二级渠道",
          attrs: { placeholder: "二级渠道" },
          datas:[],
        },
        third_level: {
          type: "select",
          label: "三级渠道",
          attrs: { placeholder: "三级渠道" },
          datas:[],
        },
        realname: {
          type: "input",
          label: "推广员姓名",
          attrs: { placeholder: "推广员姓名" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
      selectedRowKeys:[],
    } as any);
    // 服务
    const $service = new promotionPerformanceService();
    // 表格节点
    const LTableRef = ref(null as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    
    onMounted(()=>{
      $getChannelAllList({"level":1}).then((res:any)=>{
        state.searchForm.first_level.datas = res.data.map((x:any)=>{
          return {
            "label":x.name,
            "value":x.id,
          }
        })
      })
      $getChannelAllList({"level":2}).then((res:any)=>{
        state.searchForm.second_level.datas = res.data.map((x:any)=>{
          return {
            "label":x.name,
            "value":x.id,
          }
        })
      })
      $getChannelAllList({"level":3}).then((res:any)=>{
        state.searchForm.third_level.datas = res.data.map((x:any)=>{
          return {
            "label":x.name,
            "value":x.id,
          }
        })
      })
    });
    return () => (
      <Page>
        <CardWithTitle title="推广业绩">
        </CardWithTitle>
        <LTable
          ref={LTableRef}
          service={$service}
          toolbar={state.toolbar}
          v-model={state}
        >
          <a-table
            bordered={true}
            scroll={{ x: "max-content" }}
            dataSource={state.dataSource}
            columns={state.columns}
            pagination={state.pagination}
            onChange={tableChangeHandler}
            row-selection={rowSelection.value}
            loading={state.loading}
            rowKey="id"
            v-slots={{
              bodyCell:( {column,record }:any)=>{
                //操作栏
                if(column.dataIndex === "operation") {
                  return(
                    <div class="operation">
                      <a-button
                        type="primary"
                        size="small"
                        v-slots={{
                          icon: () => <EditOutlined />,
                        }}
                        onClick={() => {
                          navigator.push({ name: 'personalPerformancePage', query: { saler_id: record.id} })
                        }}
                      >
                        查看业绩
                      </a-button>
                    </div>
                  )
                }
              }
            }}
          />
        </LTable>
      </Page>
    );
  },
});